<template>
	<div class="calendar-index">
		<calendar id="calendar" ref="calendar" :defaultDate="currentDate" @changeDate="changeDate"
			@changeHeight="resetHeight"></calendar>
		<view class="history" :style="{ maxHeight: maxHeight }">
			<view :class="['history-item', item.mode === 'self' ? 'white' : 'red']" v-for="(item, ind) in historyList"
				@tap="jumpRecord(item.mode, item.id)">
				<span>{{ currentDate }} {{ item.date }}</span>
				<u-icon name="trash" color="#fff" size="20" @tap.stop.native="delHistory(ind)"></u-icon>
			</view>
		</view>
		<div class="buttons">
			<u-button type="primary" shape="circle" icon="plus" text="自爱" @tap="jumpRecord('self')"></u-button>
			<u-button type="primary" shape="circle" icon="plus" text="爱爱" @tap="jumpRecord('every')"></u-button>
			<u-button type="primary" shape="circle" icon="clock" text="计时" @tap="getTimeColumns"></u-button>
		</div>
		<time-record ref="timeRecord" :easy="true" @confirm="(time) => model.time = time"></time-record>
	</div>
</template>

<script>
	import calendar from "./component/calendar.vue"
	import moment from "moment"
	import timeRecord from "../../../components/timeRecord.vue"
	export default {
		name: "calendarIndex",
		components: {
			calendar,
			timeRecord
		},
		props: ["navHeight"],
		data() {
			return {
				currentDate: "",
				historyList: [],
				maxHeight: 0,
			}
		},
		mounted() {
			this.changeDate()
			this.resetHeight()
		},
		methods: {
			moment,
			jumpRecord(type, id = "") {
				uni.navigateTo({
					url: `/pages/record/index?type=${type}&date=${this.currentDate}&id=${id}`,
					animationDuration: 200
				})
			},
			changeDate(date) {
				this.currentDate = date ?
					`${date.year}-${date.month < 10 ? '0' + date.month : date.month}-${date.day < 10 ? '0' + date.day : date.day}` :
					this.currentDate ? this.currentDate : moment().format("YYYY-MM-DD")
				this.historyList = uni.getStorageSync("actions")[this.currentDate] || []
			},
			updateTime() {
				this.$refs.calendar.updateList()
				this.changeDate()
			},
			resetHeight() {
				let _this = this
				setTimeout(() => {
					let calendar = uni.createSelectorQuery().in(this).select("#calendar")
					calendar.boundingClientRect(data => {
						if (!data.height) this.resetHeight()
						_this.maxHeight =
							`calc(96vh - ${_this.navHeight} - ${data.height}px - 160px)`
					}).exec()
				}, 300)
			},
			delHistory(index) {
				let tempList = uni.getStorageSync("actions")
				tempList[this.currentDate] = tempList[this.currentDate].filter((_, ind) => {
					return index !== ind
				})
				uni.setStorageSync("actions", tempList)
				this.updateTime()
			},
			getTimeColumns() {
				this.$refs.timeRecord.open()
			}
		}
	}
</script>

<style lang="less" scoped>
	.calendar-index {
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 2vh 5vw;
		box-sizing: border-box;

		.history {
			margin: 20px 0;
			flex: 1;
			overflow-y: scroll;
			display: flex;
			flex-direction: column;
			align-items: center;
			transition: all .5s;

			.history-item {
				box-sizing: border-box;
				width: 100%;
				height: 40px;
				padding: 8px 10px 8px 20px;
				border-radius: 10px;
				margin-bottom: 20px;
				background-color: #2c2b34;
				position: relative;
				display: flex;
				justify-content: space-between;

				&::before {
					content: "";
					height: 4px;
					width: 4px;
					border-radius: 50%;
					background-color: #fff;
					position: absolute;
					left: 10px;
					top: 50%;
					transform: translateY(-50%);
				}

				&.red::before {
					background-color: red;
				}
			}
		}

		/deep/ .buttons {
			display: flex;
			justify-content: space-between;

			button:nth-child(2) {
				margin: 0 10px;
			}
		}
	}
</style>